<template>
  <div>
    <introduce>
      <span class="title-gray" slot="pre">计费/</span>
      <span class="title-bold" slot="title"> 账户信息</span>
      <span slot="info">
        - 统计当前账户的剩余消息额度，可根据兑换码兑换消息额度。</span
      >
      <div slot="con" style="margin-top: 20px">
        <i class="iconfont icon-info"></i
        >目前计费功能暂不完善，所以计费功能暂未正式启用。
      </div>
      <div slot="con">
        <i class="iconfont icon-info"></i
        >正式收费后，我们将发送通知至首页公告；在此期间，若有欠费清况可联系我们：发送邮箱至<span
          class="blue"
          >sensecap@seeed.cc</span
        >
      </div>
      <span class="blue" slot="con">点击查看具体收费规则</span>
    </introduce>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <i class="iconfont icon-info" style="color: gray"></i>
        <span>设备概览</span>
      </div>
      <el-form label-width="50px">
        <el-form-item label="计划:"
          ><span style="margin-left: 80px">按量计费</span></el-form-item
        >
        <el-form-item label="状态:"
          ><span style="margin-left: 80px">正常</span></el-form-item
        >
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <i class="iconfont icon-info" style="color: gray"></i>
        <span>设备概览</span>
      </div>
      <el-form label-width="80px">
        <el-form-item label="账户余额:"
          ><span style="margin-left: 80px">￥123400.00</span></el-form-item
        >
        <el-form-item label="充值金额:"
          ><el-input
            placeholder="请输入充值金额"
            v-model="addForm.amount"
            class="input"
          ></el-input
        ></el-form-item>
        <el-form-item label="备注:"
          ><el-input
            placeholder="请输入备注信息"
            v-model="addForm.desc"
            class="input"
          ></el-input
        ></el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 84px" size="mini"
            >充值</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Introduce from "@/components/Introduce.vue";
export default {
  name: "accountView",
  data() {
    return {
      addForm: {
        amount: "",
        desc: "",
        type: "recharge",
      },
    };
  },
  components: { Introduce },
};
</script>

<style lang="less" scoped>
.iconfont {
  color: orange;
  font-size: 20px;
  font-weight: 700;
}
.blue {
  color: #5fadff;
}
.input {
  width: 220px;
  margin-left: 85px;
}
.box-card {
  margin-top: 10px;
}
</style>
